<template>
  <el-row>
    <el-col :span="24">
      <el-card :span="24">
        <div id="chart01"></div>
        <div id="chart02"></div>
      </el-card>
    </el-col>
  </el-row>
</template>



<script setup>
import adminApi from "@/api/adminApi";
import * as echarts from "echarts";
import { onMounted } from "vue";
import { ref } from 'vue';
//top5中的数据
const driverName = ref([]);
const sum = ref([]);
const num = ref(0);


function top6() {
  adminApi.top6()
    .then(resp => {
      num.value = resp.data;
      chart02();
    })
    .catch(error => {
      console.error("获取数据失败", error);
    });
}





function chart02() {
  var chartDom = document.getElementById('chart02');
  if (!chartDom) return; // 确保 DOM 元素存在  

  var myChart = echarts.getInstanceByDom(chartDom) || echarts.init(chartDom, 'dark');
  var option = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    series: [
      {
        name: '用户人数',
        type: 'gauge',
        progress: {
          show: true
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}'
        },
        data: [
          {
            value: num.value, // 使用 userCount.value 作为图表的值  
            name: '用户人数'
          }
        ]
      }
    ]
  };
  myChart.setOption(option);
}





function top5() {
  adminApi.top5()
    .then(resp => {
      driverName.value = resp.data.map(item => item.mname);
      sum.value = resp.data.map(item => item.count);
      chart01();
    })
    .catch(error => {
      console.error("获取数据失败", error);
    });
}

function chart01() {
  //定义函数显示图表
  var chartDom = document.getElementById('chart01');
  var myChart = echarts.init(chartDom, 'dark');
  var option = {
    title: {
      text: '当前车型的车辆数',
      textStyle: {
        color: '#FFFFFF',
        fontWeight: 'lighter' // 修正拼写错误  
      }
    },
    legend: {
      data: ['车辆数'],
      right: '10%',
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        color: '#FFFFFF'
      }
    },
    xAxis: {
      data: driverName.value,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#FFFFFF",
          width: 1
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value', // 明确指定 yAxis 为数值轴  
      axisLine: {
        show: true,
        lineStyle: {
          color: "#FFFFFF",
          width: 1
        }
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: '车辆数', // 修改为更准确的名称  
        type: 'bar',
        data: sum.value,
        barWidth: '20%'
      }
    ]
  };
  myChart.setOption(option);
}

onMounted(() => {
  top5();
  top6();
})
</script>

<style scoped>
#chart01 {
  float: left;
  width: 500px;
  height: 400px;
}

#chart02 {
  float: right;
  width: 500px;
  height: 400px;
}
</style>